<!DOCTYPE html />
<html>
<head>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <title>GoogleMaps</title>
    <script type="text/javascript">

        //fake database info
        var dbMapPoints = [
        {Pk_Id: 1, Fk_Id: 1, lat: 19.23458, lng:78.678345},
        {Pk_Id: 2, Fk_Id: 1, lat: 17.35678, lng:77.345670},
        {Pk_Id: 3, Fk_Id: 1, lat: 18.77777, lng:79.777777},
        {Pk_Id: 4, Fk_Id: 1, lat: 19.76666, lng:76.890006},
        {Pk_Id: 5, Fk_Id: 2, lat: 18.23000, lng:77.458345},
        {Pk_Id: 6, Fk_Id: 2, lat: 19.35678, lng:79.968570},
        {Pk_Id: 7, Fk_Id: 2, lat: 17.77777, lng:78.453377}
        ];
        var map = null;
        var mapDefaults = {
            zoom: 8,
            center: null,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // documentReady
        $(function () {
            var mapPosition = new google.maps.LatLng(19.76666, 76.890006);
            mapDefaults.center = mapPosition;
            map = new google.maps.Map(document.getElementById("map"), mapDefaults);

            //write polygon in map
            loadWithFk(1);
            loadWithFk(2);
        });

        function loadWithFk(fkId) {
            //grep should be replaced with tha call to your backend for getting data for fk_id
            var latlng = [];
            $.when($.each($.grep(dbMapPoints, function (n, i) { return (n.Fk_Id === fkId); }), function () {
                latlng.push(new google.maps.LatLng(this.lat, this.lng));
            })).done(function () {

                mapPoly = new google.maps.Polygon({
                    paths: latlng,
                    strokeColor: "#FF8800",
                    strokeOpacity: 0.8,
                    strokeWeight: 3,
                    fillColor: "#FF8800",
                    fillOpacity: 0.35,
					editable:true
                });
                mapPoly.setMap(map);

            });
        }
    </script>
</head>
<body>
    <section id="placeholder">
        <div id="map" style="width: 100%; height: 100%;">
        </div>
    </section>
</body>
</html>